<template>
  <div v-loading="loading" :style="{width: '100%', height: height}">
    <v-chart
      :option="chartOption" style="width:100%;height:100%;"
      :theme="chartTheme" autoresize
    ></v-chart>
  </div>
</template>

<script>
import MixinChartOptionToolbox from '@/mixins/chart-option-toolbox';

import { defaultNumber } from '@/utils';
import MixinVchartTheme from '@/mixins/mixin-vchart-theme';

export default {
  name: 'line-chart',
  mixins: [MixinChartOptionToolbox, MixinVchartTheme],
  props: {
    xData: {
      type: Array,
      default () {
        return []
      }
    },
    yData: {
      type: Array,
      default () {
        return []
      },
    },
    lines: {
      type: Array,
      default () {
        return []
      },
    },
    unitName: {
      type: String,
      default: '吨标准煤'
    },
    height: {
      type: String,
      default: '400px'
    },
    showLegend: {
      type: Boolean,
      default: false,
    },
    defaultSelectAllLegend: Boolean,
    title: String,
    downloadFunc: Function,
    showDownloadTool: {
      type: Boolean,
      default: true,
    },
    grid: {
      type: Object,
      default () {
        return {
          top: '17%'
        }
      }
    },
    dataViewFirstCellName: {
      type: String,
      default: '时间'
    },
  },
  data () {
    return {
      loading: false,
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    chartOption () {
      const { xData, yData, lines, unitName, showLegend, title } = this
      return {
        title: {
          text: title,
          textStyle: {
            fontSize: '1.2rem',
            fontWeight: 'normal'
          },
          left: 'center'
        },
        legend: {
          left: 'center',
          top: '8%',
          data: lines.map(v => v.name),
          show: showLegend,
        },
        grid: this.grid,
        toolbox: this.chartOptionToolbox,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          valueFormatter: value => value != null ? `${defaultNumber(value)} ${unitName}` : '-'
        },
        xAxis: {
          type: 'category',
          data: xData,
        },
        yAxis: {
          type: 'value',
          name: unitName,
          axisLabel: {
            show: true
          },
          axisLine: {
            show: true,
          },
        },
        series: [
          ...lines.map((v, i) => ({
            type: 'line',
            smooth: true,
            name: v.name,
            ...(lines.length < 2
              ? {
                  itemStyle: {
                    color: this.themeColor
                  }
                }
              : {}),
            data: yData[i],
          }))
        ]
      }
    },
  },
  methods: {
    setLoading (loading) {
      this.loading = loading;
    }
  },
}
</script>
